<template>
  <div ref="lists">
    <div v-show="orders.length>0">
      <div class='order-list' v-for="(item,index) in orders" :key="index"
           @click="$router.push({name:'order-details',query:{ordernum:item.ordernum}})">
        <div class='ordernum-wrap'>
          <div class='ordernum'>订单编号：{{item.ordernum}}</div>
          <div class='status'>{{item.status==='0'?'待付款':item.status==='1'?'待收货':'已收货'}}</div>
        </div>
        <div class='item-list' v-for="(item2,index2) in item.goods" :key="index2">
          <div class='image'><img v-lazy="item2.image" alt=""/>
          </div>
          <div class='title'>{{item2.title}}</div>
          <div class='amount'>x {{item2.amount}}</div>
        </div>
        <div class='total-wrap'>
          <div class='total'>实付金额：¥{{item.total}}</div>
          <div class="status-wrap">
            <div class='status-btn' v-if="item.status==='0'" @click.stop="cancel(index,item.ordernum)">取消订单</div>
            <div class="status-btn" v-if="item.status == '0'">去付款</div>
            <div class="status-btn" v-if="item.status == '1'" @click.stop="sure(index,item.ordernum)">确认收货</div>
            <div class="status-btn" v-if="item.status == '2'">已收货</div>
          </div>
        </div>
      </div>
    </div>
    <div class="no-data" v-show="orders.length<=0">没有相关订单</div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import BScroll from 'better-scroll'

export default {
  name: 'order-list',
  methods: {
    ...mapActions({
      getMyOrder: 'order/getMyOrder',
      cancelOrder: 'order/cancelOrder',
      sureOrder: 'order/sureOrder'
    }),
    initScroll () {
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      this.$refs.lists.style.height = windowHeight - this.$refs.lists.offsetTop + 'px'
      this.scroll = new BScroll(this.$refs.lists, {
        click: true,
        scrollY: true,
        pullUpLoad: true
      })
      this.scroll.on('pullingUp', async () => {
        this.page++
        let res = await this.getMyOrder({ page: this.page, status: this.status })
        if (res.code === 200) {
          this.$nextTick(() => {
            this.scroll.refresh()
            this.scroll.finishPullUp()
          })
        } else {
          this.$toast('没有更多订单了')
        }
      })
    },
    async initData () {
      this.page = 1
      if (this.scroll) {
        this.scroll.scrollTo(0, 0,)
        this.scroll.destroy()
        this.scroll = null
      }
      let res = await this.getMyOrder({ page: this.page, status: this.status })
      if (res.code === 200) {
        this.$nextTick(() => {
          this.initScroll()
        })
      }
    },
    cancel (index, ordernum) {
      this.$dialog.confirm({
        message: '确定要取消订单？'
      })
        .then(async () => {
          let res = await this.cancelOrder({ index: index, ordernum: ordernum })
          if (res.code === 200) {
            this.$toast.success('您的订单已经取消')
          } else {
            this.$toast.fail('订单取消失败')
          }
        })
        .catch(() => {})
    },
    sure (index, ordernum) {
      this.$dialog.confirm({
        message: '确定确认收货？'
      })
        .then(async () => {
          let res = await this.sureOrder({ index: index, ordernum: ordernum })
          if (res.code === 200) {
            this.$toast.success('已确认')
          } else {
            this.$toast.fail(res.data)
          }
        })
        .catch(() => {})
    }
  },
  computed: {
    ...mapState({
      orders: state => state.order.orders
    })
  },
  created () {
    this.status = this.$route.query.status ? this.$route.query.status : 'all'
    this.initData()
  },
  beforeRouteUpdate (to, from, next) {
    this.status = to.query.status ? to.query.status : 'all'
    this.initData()
    next()
  },
  beforeDestroy () {
    this.scroll.scrollTo(0, 0)
    this.scroll.destroy()
    this.scroll = null
  }
}
</script>

<style scoped>
  .no-data {
    padding: .2rem;
    font-size: .28rem;
    text-align: center;
  }

  .order-list {
    width: 100%;
    overflow: hidden;
  }

  .order-list .ordernum-wrap {
    width: 96%;
    height: 0.8rem;
    border-bottom: #EFEFEF 1px solid;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding-left: 2%;
    padding-right: 2%;
    align-items: center;
    -webkit-align-items: center;
  }

  .order-list .ordernum-wrap .ordernum, .order-list .ordernum-wrap .status {
    width: auto;
    height: auto;
    font-size: 0.28rem;
  }

  .item-list {
    width: 100%;
    height: 1.6rem;
    border-bottom: #EFEFEF 1px solid;
    position: relative;
    z-index: 1;
  }

  .item-list .image {
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    z-index: 1;
    left: 2%;
    top: 0.2rem;
  }

  .item-list .image img {
    width: 100%;
    height: 100%;
  }

  .item-list .title {
    width: 72%;
    height: auto;
    font-size: 0.28rem;
    position: absolute;
    z-index: 1;
    left: 22%;
    top: 0.2rem;
  }

  .item-list .amount {
    width: auto;
    height: auto;
    position: absolute;
    z-index: 1;
    right: 2%;
    bottom: 0.2rem;
    font-size: 0.24rem;
    color: #909090;
  }

  .total-wrap {
    width: 96%;
    height: 0.8rem;
    border-bottom: 1px solid #F17F1F;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding-left: 2%;
    padding-right: 2%;
  }

  .total-wrap .total {
    font-size: 0.28rem;
  }

  .total-wrap .status-btn {
    font-size: 0.24rem;
    width: 1.24rem;
    height: 0.52rem;
    line-height: 0.52rem;
    text-align: center;
    border: 1px solid #f15353;
    border-radius: 4px;
    margin-left: 0.2rem;
  }

  .total-wrap .status-wrap {
    display: flex;
    width: auto;
    justify-content: flex-end;
  }

</style>
